<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>基本信息</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="onFormSubmit">保存</el-button>
                </div>
            </div>
            <table class="custom-table">
                <tr><td class="tr-title">项目名称</td><td>{{row.name}}</td></tr>
                <tr><td class="tr-title wally-label">合同价</td><td><el-input type="text" v-model="contractPrice"></el-input></td></tr>
                <tr><td class="tr-title wally-label">签约方式</td><td><el-input type="text" v-model="payName"></el-input></td></tr>
                <tr><td class="tr-title wally-label">合同签约时间</td><td>
                    <el-date-picker
                    v-model="signTime"
                    style="width:100%"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
                </td></tr>
                <tr><td class="tr-title">附件</td><td>
                    <label>{{filesName}}</label>
                    <el-button size="small" @click="initQualiUpload" type="primary">选择文件</el-button>
                    <input type="file" accept="application/pdf" ref="qualiFile" style="display: none;" @change="qualiChange">
                </td></tr>
               <!--  <tr><td class="tr-title wally-label">合同内容</td><td>
                    <quill-editor
                        style="display: inline-block;width: 100%;height: 500px;"
                        v-model="contractContent"
                        :options="editorOption"
                    ></quill-editor>
                </td></tr> -->
                
            </table>
        </el-card>
  
    </div>
</template>

<script>
import moment from 'moment'
import { uploads } from "@/api/common_api"
import {saveContract} from "@/api/contract_api"
  const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  [{ align: [] }], //对齐方式
  ["image"],
  ["clean"] //清除字体样式
];
const handlers = {
  image: function image() {
    let self = this;
    var fileInput = this.container.querySelector("input.ql-image[type=file]");
    if (fileInput === null) {
      fileInput = document.createElement("input");
      fileInput.setAttribute("type", "file");
      fileInput.setAttribute(
        "accept",
        "image/png, image/gif, image/jpeg",
        "image/jpg"
      );
      fileInput.classList.add("ql-image");
      fileInput.addEventListener("change", async function() {
        let file = fileInput.files[0];
        if (!/image\/\w+/.test(file.type)) {
          Message({
            message: "格式错误，请上传png、gif、jpg格式",
            type: "info",
            duration: 5 * 1000
          });
          return false;
        }
        let form = new FormData();
        form.append("resType", fileInput.files[0]);
        const {code,data} = await uploads('contractEditorImg',form);
        
        let length = self.quill.getSelection(true).index;
        self.quill.insertEmbed(length, "image", `${process.env.VUE_APP_FILE}${data}`);
        self.quill.setSelection(length + 1);
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  }
};
export default {
    props: ['row'],
    data() {
        return {
            contractContent:'',//合同内容
            contractPrice:'',
            signTime:'',
            payName:'',
            filesName:'',
            contractFile:'',
            editorOption: {
                modules: {
                toolbar: {
                    container: toolbarOptions,
                    handlers: handlers
                }
                },
                theme: "snow"
            }
        };
    },
    filters: {
        formatDate(value) {
            if (!value) {
                return ''
            }
            return moment(value).format("YYYY-MM-DD")
        }
    },
    created(){
        //this.getBidDetails();
    },
    methods: {
        formatDate(row, column) {
            const date = row[column.property]
            if (date == undefined) {
            return ''
            }
            return moment(date).format("YYYY-MM-DD")
        },
        initQualiUpload(){
            this.$refs.qualiFile.click();
        },
        async qualiChange(e){
            e.preventDefault();
            let _this = this;
            let file = e.target.files[0];
            if(file===undefined){return;}
            let formData = new FormData();
            formData.append("resType",file);
            const {code,data} = await uploads('contractFile',formData);
            if(code === 200){
                this.filesName = file.name;//临时储存
                this.contractFile = data//传给后端
                e.target.value = "";
            }
        },
        async onFormSubmit(){
            if(!this.contractPrice){
                return this.$message.error('请输入合同价！');
            }
            if(!this.signTime){
                return this.$message.error('请选择合同签约时间！');
            }
            if(!this.payName){
                return this.$message.error('请填写付款方式！');
            }
            let params = {};
            params.contractPrice = (this.contractPrice*100);
            params.signTime = this.signTime;
            params.payName = this.payName;
            params.contractFile = this.contractFile;
            params.id = this.row.id;
            params.bidId = this.row.bidId;
            const {code} = await saveContract(params);
            if(code === 200){
                this.$message.success('操作成功');
                this.onClose();
            }
        },
        onClose() {
            this.$emit("on-cancel-click","createContract");
        }
    }
};
</script>
<style>
    .wally-label:before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
    }
</style>
    
    